<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <!-- <link rel="stylesheet" href="../../../css/sm.min.css">
  <link rel="stylesheet" href="../../../css/sm-extend.min.css">
  <script type="text/javascript" src="../../../common/common.js"></script>
  <link rel="stylesheet" href="../../../css/common.css"> -->
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/common.css">

  <style>
    .page.page-current{
      overflow: auto;
    }

    p#back-to-top{
        position:fixed;
        display:none;
        bottom:100px;
        right:80px;
    }

    .cityclass{
      width: 50%;
      position: absolute;
      top: 85px;
      z-index: 99;
      background-color: white;
      display: none;
    }
    .distanceclass{
      width: 50%;
      position: absolute;
      top: 85px;
      right: 0;
      z-index: 99;
      background-color: white;
      display: none;
    }

  </style>
</head>
<body id="gdsuiajd">
  
  <div class="page-group">
    <div class="page">
      <div class="content">

      

        <!-- 页面内容区域 -->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left"></a>
            <!-- <a class="icon icon-refresh pull-right"></a> -->
            <h1 class="title">附近城市门店列表</h1>
        </header>
        <!-- 城市选择 -->
        <div class="cityclass">
          <div onclick="surecity()">城市1</div>
          <div onclick="surecity()">城市2</div>
          <div onclick="surecity()">城市3</div>
        </div>
        <!-- 距离选择 -->
        <div class="distanceclass">
            <div onclick="suredistance()">距离1</div>
            <div onclick="suredistance()">距离2</div>
            <div onclick="suredistance()">距离3</div>
        </div>
        <div class="content">
            <div class="buttons-tab">
              <a href="#tab1" class="tab-link active button" onclick="buttonclick(1)">
                  城市
                  <span class="icon icon-down"></span>
                  <!-- <span class="icon icon-up"></span> -->
              </a>
              <a href="#tab2" class="tab-link button" onclick="buttonclick(2)">
                  距离排序
                  <span class="icon icon-down"></span>
                  <!-- <span class="icon icon-up"></span> -->
              </a>
              <!-- <a href="#tab3" class="tab-link button">待发货</a> -->
            </div>
            <!-- <div class="content-block">
              <div class="tabs">
                <div id="tab1" class="tab active">
                  <div class="content-block">
                    <p>This is tab 1 content</p>
                  </div>
                </div>
                <div id="tab2" class="tab">
                  <div class="content-block">
                    <p>This is tab 2 content</p>
                  </div>
                </div>
                <div id="tab3" class="tab">
                  <div class="content-block">
                    <p>This is tab 3 content</p>
                  </div>
                </div>
              </div>
            </div> -->
        </div>
        

        <!-- <div class="content">
            <div class="content-block">
              <p><a href="#" class="create-popup">城市/距离（点击事件暂时放在这）</a></p>
            </div>
          </div> -->

          <div class="list-block media-list" style="position:absolute;top:100px;width: 100%;margin: 0;">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">金天国际济南中心店</div>
                        <div>99km</div>
                      </div>
                      <div class="item-subtitle">位置位置位置位置</div>
                    </div>
                  </div>
                </li>
                <li>
                    <div class="item-content">
                      <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">金天国际济南中心店</div>
                          <div>99km</div>
                        </div>
                        <div class="item-subtitle">位置位置位置位置</div>
                      </div>
                    </div>
                  </li>
                  <li>
                      <div class="item-content">
                        <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                        <div class="item-inner">
                          <div class="item-title-row">
                            <div class="item-title">金天国际济南中心店</div>
                            <div>99km</div>
                          </div>
                          <div class="item-subtitle">位置位置位置位置</div>
                        </div>
                      </div>
                    </li>
                    <li>
                        <div class="item-content">
                          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">金天国际济南中心店</div>
                              <div>99km</div>
                            </div>
                            <div class="item-subtitle">位置位置位置位置</div>
                          </div>
                        </div>
                      </li>
                      <li>
                          <div class="item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">金天国际济南中心店</div>
                                <div>99km</div>
                              </div>
                              <div class="item-subtitle">位置位置位置位置</div>
                            </div>
                          </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">金天国际济南中心店</div>
                                  <div>99km</div>
                                </div>
                                <div class="item-subtitle">位置位置位置位置</div>
                              </div>
                            </div>
                          </li>
                          <li>
                              <div class="item-content">
                                <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                                <div class="item-inner">
                                  <div class="item-title-row">
                                    <div class="item-title">金天国际济南中心店</div>
                                    <div>99km</div>
                                  </div>
                                  <div class="item-subtitle">位置位置位置位置</div>
                                </div>
                              </div>
                            </li>
                            <li>
                                <div class="item-content">
                                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                                  <div class="item-inner">
                                    <div class="item-title-row">
                                      <div class="item-title">金天国际济南中心店</div>
                                      <div>99km</div>
                                    </div>
                                    <div class="item-subtitle">位置位置位置位置</div>
                                  </div>
                                </div>
                              </li>
                              <li>
                  <div class="item-content">
                    <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">金天国际济南中心店</div>
                        <div>99km</div>
                      </div>
                      <div class="item-subtitle">位置位置位置位置</div>
                    </div>
                  </div>
                </li>

                <li>
                    <div class="item-content">
                      <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">金天国际济南中心店</div>
                          <div>99km</div>
                        </div>
                        <div class="item-subtitle">位置位置位置位置位置位置位置位置</div>
                      </div>
                    </div>
                  </li>
              </ul>
            </div>
          </div>
            <!-- 返回顶部样式 -->
            <div class="top top_fixed">
              <a id="tops" href="#">回顶部</a>
            </div>

            <!-- <p id="back-to-top"><a href="">返回顶部</a></p> -->
            <!-- <p id="back-to-top">返回顶部</p> -->
            <!-- <p id="back-to-top"><a href="javascript:window.scrollTo(0,0)">返回顶部</a></p> -->
            <!-- <div id="back-to-top"><a href="#gdsuiajd">返回顶部</a></div> -->

          

    </div>
  </div>
  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>
<script type="text/javascript">
  

  //放函数区域
  // 遮罩层
  $(document).on('click','.create-popup', function () {
  var popupHTML = '<div class="popup">'+
                    '<div class="content-block">'+
                      '<p>Popup created dynamically.</p>'+
                      '<p>后期根据ui调整</p>'+
                      '<p><a href="#" class="close-popup">Close me</a></p>'+
                    '</div>'+
                  '</div>'
  $.popup(popupHTML);
});

// // 弹出返回顶层按钮
//     $$(".page").scroll(function(){
//       // alert('1')
//         if ($$(".page").scrollTop()>50){
//             $$("#back-to-top").fadeIn(1500);
//         }
//         else
//         {
//             $$("#back-to-top").fadeOut(1500);
//         }
//     });
// // 返回顶部
// $$('#back-to-top').on('click', e => {
//   // alert(1)
//   e.preventDefault()
//     $$('.page').animate({
//       scrollTop: 0
//     },
//     500
//   )
// })
// 回到顶部
goTop()
function buttonclick(num){
  if(num == 1){ // 展示城市
    $$('.cityclass').show()
  }
  if(num == 2){ // 展示距离
    $$('.distanceclass').show()
  }

}
function surecity() { // 隐藏城市
  console.log(1)
  $$('.cityclass').hide()
}
function surecity() { // 隐藏城市
  console.log(1)
  $$('.distanceclass').hide()
}



  //需要初始化传递数据的函数，函数名，跟参数都不要变，固定写死的
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/
     if(isNotNull(data)){
        // $$("#div_version").html("版本号：V"+data);
     }
  }



  	
    // 初始化
    $(function(){
      // $$('.cityclass').hide()
      // $$('.distanceclass').hide()
      $.init();
    });
  </script>
</body>
</html>